<template>
  <div class="login">
    <form>
      <div class="input-container">
        <div class="input-group">
          <label class="phone-icon"></label>
          <input type="tel" class="phone-input" placeholder="请输入手机号码" v-model="phoneNumber">
        </div>
        <div class="input-group">
          <label class="hidden-show-icon"></label>
          <input type="tel" placeholder="请输入验证码" class="code-input" v-model="vertifyCode">
          <button class="get-code" @click="getCode">获取验证码</button>
        </div>
      </div>
      <div class="warning" v-if="warningShow">请输入正确的手机号码</div>
      <button class="login-btn" @click.prevent="login()">登录</button>
      <!-- <button class="back-btn" @click.prevent="back()">返回</button> -->
    </form>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
import { MessageBox } from 'mint-ui'
export default {
  name: 'Login',
  data () {
    return {
      phoneNumber:'',
      vertifyCode: '',
      code:'',
      warningShow:false
    }
  },
  methods: {
    getCode () {
      let code = ''
      if(!this.phoneNumberCheck) {
        this.warningShow = true
        return
      } else {
        this.warningShow = false
        for(let i = 0;i< 6;i ++) {
          code += Math.floor(Math.random()*10)
        }
        this.code = code
        MessageBox({
          title: '验证码',
          message: code
        })
        console.log('验证码:' + code)
      }
    },
    login () {
      if(this.code === this.vertifyCode && this.code ) {
        Toast('登陆成功，即将跳转到个人中心')
        localStorage.setItem('pdd_user',this.phoneNumber)
        this.$router.go(0)
      } else {
        Toast('登陆失败')
      }
      
    }  
  },
  computed: {
    phoneNumberCheck () {
      let reg = /^1(3|4|5|6|7|8|9)\d{9}$/
      return reg.test(this.phoneNumber)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .login
    position fixed
    left 0
    right 0
    top 0
    bottom 0
    background #f5f5f5
    padding-top 30px
    box-sizing border-box

    .input-container
      border-top 1px solid #ccc
      border-bottom 1px solid #ccc
      padding 2px 0

      .input-group
        wdith 100%
        height 50px
        background #fff
        display flex
        align-items center
        padding 0 2%

        &:first-child
          position relative

          &::after
            content ''
            display block
            width 80%
            height 1px
            background #ccc
            position absolute
            right 0
            bottom 0

        input::-webkit-input-placeholder
          font-size 14px
          font-weight lighter
          color #ccc

        input[type='tel']
          height 50%
          border none
          outline none
          margin-left 20px

          &.phone-input
            width 80%

          &.code-input
            width 50%

        label
          background-image: url('./../images/phone_sprite.png')
          display inline-block
          background-size 66px 66px

        .phone-icon
          width 17px
          height 26px
          background-position 0 0

        .hidden-show-icon
          background-position: -20px 0
          width 18px
          height 23px

        .get-code
          width 100px
          height 35px
          border 1px solid #de3025
          border-radius 3px
          background #fff;
          color #de3025
          cursor pointer

        .active
          color #ccc
          border 1px solid #ccc

    form
      .warning
        width 100%
        height 25px
        font-size 10px
        color red
        line-height 25px

      & > button
        display block
        width 80%
        height 50px
        line-height 50px
        border-radius 5px
        margin 10px auto
        font-size 18px

        &.login-btn
          background #de3025
          color #fff
          border none

        &.back-btn
          background #fff
          color #de3025
          border 1px solid #de3025

</style>

